<template>
  <el-drawer v-model="drawer" :with-header="false" :size="pageSize" ref="drawerRef" :append-to-body="true" width="730px" @close="close" class="activeDetail">
    <div class="active-detail-content">
      <div class="header-content">
        <h3 class="active-title">{{ form.name }}</h3>
        <el-row justify="center" style="margin-top:5px">
          <div class="tips-cell">
            <span class="tips">负责人</span>
            <span class="tips-data">{{ form.dutyUserName }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">创建时间</span>
            <span class="tips-data">{{ form.createTime }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">活动时间</span>
            <span class="tips-data">{{ form.startTime }} - {{ form.endTime }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">地点</span>
            <span class="tips-data">{{ form.address }}</span>
          </div>
        </el-row>
      </div>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <el-card :body-style="{ padding: `8px 10px` }" style="margin-right:10px" shadow="hover">
            <el-row align="middle" class="row-cell">
              <label class="label-tips">活动预算</label>
              <el-row align="middle">
                <div class="label-data">{{ form.budgetMoney }}</div>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">实际支出统计</label>
              <el-row align="middle">
                <div class="label-data">{{ expendMoney }}</div>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">新增线索数量</label>
              <el-row align="middle">
                <div class="label-data">{{ form.addNumber }}</div>
                <el-button type="primary" link size="small" @click="handleSource">线索清单</el-button>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">预线索单价/条(元)</label>
              <el-row align="middle">
                <div class="label-data">{{ form.addNumber == 0 ? 0 : (form.budgetMoney / form.addNumber).toFixed(2) }}</div>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">线索单价/条(元)</label>
              <el-row align="middle">
                <div class="label-data">{{ form.addNumber == 0 ? 0 : (expendMoney / form.addNumber).toFixed(2) }}</div>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">成交金额动态统计</label>
              <el-row align="middle">
                <div class="label-data">{{ tradingVolume.toFixed(2) }}</div>
              </el-row>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card :body-style="{ padding: `14px 10px 16px` }" shadow="hover">
            <el-row align="middle">
              <h4>活动阶段</h4>
              <tree-line style="flex:1" :data="treeData" :active="form.stageId" @getItem="getStage($event)"></tree-line>
            </el-row>
            <div class="action-card">
              <el-row align="middle" justify="space-between">
                <h4>行动/事项</h4>
                <el-row align="middle" justify="end">
                  <div align="middle" class="title-item" @click="openMaterial('doc')">
                    <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                      <ele-Document/>
                    </el-icon>
                    <span class="tips">文档</span>
                    <span>{{ docNumber.docNum }}</span>
                  </div>
                  <div align="middle" class="title-item" @click="openMaterial('file')">
                    <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                      <ele-Link/>
                    </el-icon>
                    <span class="tips">附件</span>
                    <span>{{ docNumber.attachNum }}</span>
                  </div>
                </el-row>
              </el-row>
              <el-row align="middle" gutter="24" style="margin-top:20px;">
                <el-col :span="4" style="margin-bottom: 20px;" v-for="(item,index) in matterTypeList" :key="index" class="showFinger">
                  <div :class="['action-cell', selIndex === index?'activity':'']" @click="openTable(item, index)">
                    <div class="action-top">
                      <i :class="matterIcon[item.code]"></i>
                      <span class="action-tips">{{ codeDict[item.code] }}</span>
                    </div>
                    <p class="action-data">{{ item.number }}</p>
                  </div>
                </el-col>
                <!-- <div class="action-cell">
                    <div class="action-top">
                        <i class="fa fa-whatsapp"></i>
                        <span class="action-tips">行动记录</span>
                    </div>
                    <p class="action-data">7</p>
                </div>
                <div class="action-cell" @click="openTable('order')">
                    <div class="action-top">
                        <el-icon size="16px">
                            <ele-Tickets/>
                        </el-icon>
                        <span class="action-tips">合同订单</span>
                    </div>
                    <p class="action-data">1</p>
                </div>
                <div class="action-cell" @click="openTable('cancel')">
                    <div class="action-top">
                        <el-icon size="16px">
                            <ele-DocumentDelete/>
                        </el-icon>
                        <span class="action-tips">取消订单</span>
                    </div>
                    <p class="action-data">1</p>
                </div>
                <div class="action-cell" @click="openTable('reback')">
                    <div class="action-top">
                        <el-icon size="16px">
                            <ele-Money/>
                        </el-icon>
                        <span class="action-tips">付款</span>
                    </div>
                    <p class="action-data">1</p>
                </div>
                <div class="action-cell">
                    <div class="action-top">
                        <i class="iconfont icon-biaodan"></i>
                        <span class="action-tips">发票</span>
                    </div>
                    <p class="action-data">1</p>
                </div>
                <div class="action-cell" @click="openTable('logistic')">
                    <div class="action-top">
                        <el-icon size="18px">
                            <ele-Van/>
                        </el-icon>
                        <span class="action-tips">收货</span>
                    </div>
                    <p class="action-data">1</p>
                </div> -->
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <el-card :body-style="{ padding: `8px 10px` }" style="margin-right:10px" shadow="hover">
            <div class="card-item">
              <h4>行动选项</h4>
              <el-row style="margin-top: 10px">
                <span>最近操作</span>
              </el-row>
              <el-row>
                <el-tag v-for="(item, index) in matterLogList" :key="index" size="small" style="margin-right:10px;margin-top:10px;">{{ item }}</el-tag>
                <span class="arrow" v-if="false">
                                <el-popover placement="right-start" :width="320" trigger="hover" popper-class="action-popper">
                                    <template #reference>
                                        <el-icon><ele-CirclePlusFilled/></el-icon>
                                    </template>
                                    <div style="position:relative;z-index:2;">
                                        <h5 class="sale-title">全部操作</h5>
                                        <el-tag v-for="(item, index) in allOptions" :key="item.id" size="small"
                                                style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}
                                        </el-tag>
                                    </div>
                                </el-popover>
                            </span>
              </el-row>
            </div>
            <div class="refLine">
              <el-divider border-style="dotted" style="margin:10px 0"/>
            </div>
            <el-row class="card-cell" align="middle">
              <label class="card-tips">参与人</label>
              <el-tag v-for="(item, index) in form.participantList" :key="index" size="large"
                      style="margin-right:10px;margin-top:10px;cursor: pointer;">
                {{ item.userName }}
              </el-tag>
              <div class="card-data">
                <el-icon size="18px" color="var(--el-color-primary-light-5)" @click="handleSelectJoin">
                  <ele-CirclePlusFilled/>
                </el-icon>
              </div>
            </el-row>
            <el-divider border-style="dotted" style="margin:10px 0"/>
            <div class="card-item">
              <el-row align="middle">
                <span style="margin-right:5px">基础信息</span>
                <el-icon color="var(--el-color-primary)" style="cursor:pointer;" @click="handleEditBase">
                  <ele-Edit/>
                </el-icon>
              </el-row>
              <div class="card-list">
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">活动主题</label>
                  <div class="label-content">{{ form.name }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">活动类型一级分类</label>
                  <div class="label-content">{{ form.oneActivityName }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">活动类型二级分类</label>
                  <div class="label-content">{{ form.twoActivityName }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">促销产品信息</label>
                  <div class="label-content">{{ form.productNames }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">广告宣传标语</label>
                  <div class="label-content">{{ form.slogan }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">投放月份</label>
                  <div class="label-content">{{ form.month }} 月</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">活动地点</label>
                  <div class="label-content">{{ form.address }}</div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">活动描述</label>
                  <div class="label-content">
                    <div :class="['label-data', isDescOpen ? 'label-all-data' : '']">{{ form.description }}</div>
                    <el-row justify="end" style="margin-top:5px" v-if="form.description.length > 13">
                      <el-button type="primary" link size="small" @click="checkAllDesc">{{ isDescOpen ? '收起' : '点击展开' }}</el-button>
                    </el-row>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips">备注</label>
                  <div class="label-content">
                    <div :class="['label-data', isRemarkOpen ? 'label-all-data' : '']">{{ form.remark }}</div>
                    <el-row justify="end" style="margin-top:5px" v-if="form.remark.length > 13">
                      <el-button type="primary" link size="small" @click="checkAllRemark">{{ isRemarkOpen ? '收起' : '点击展开' }}</el-button>
                    </el-row>
                  </div>
                </el-row>
              </div>
            </div>
            <el-divider border-style="dotted" style="margin:10px 0"/>
            <!-- <div class="card-item">
                <el-row align="middle">
                    <span style="margin-right:5px">服务商信息</span>
                    <el-icon color="var(--el-color-primary)" style="cursor:pointer;" @click="handleServiceEdit"><ele-Edit/></el-icon>
                </el-row>
                <div class="card-list">
                    <el-row align="middle" class="list-cell">
                        <label class="label-tips">服务商</label>
                        <div class="label-content">****展览公司</div>
                    </el-row>
                    <el-row align="middle" class="list-cell">
                        <label class="label-tips">业务对接人</label>
                        <div class="label-content">*小姐</div>
                    </el-row>
                    <el-row align="middle" class="list-cell">
                        <label class="label-tips">联系电话</label>
                        <div class="label-content">13800138000</div>
                    </el-row>
                </div>
            </div> -->
          </el-card>
        </el-col>
        <div class="action-add-btn" v-show="scrollTop > refLineTop">
          <el-popover
              placement="right-start"
              :width="320"
              trigger="hover"
              popper-class="action-popper"
          >
            <template #reference>
              <el-icon>
                <ele-CirclePlusFilled/>
              </el-icon>
            </template>
            <div style="position:relative;z-index:2;">
              <h5 class="sale-title">最近操作</h5>
              <el-tag v-for="(item, index) in recentList" :key="item.id" size="small"
                      style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}
              </el-tag>
              <el-divider border-style="dotted" style="margin: 10px 0"/>
              <h5 class="sale-title">全部操作</h5>
              <el-tag v-for="(item, index) in allOptions" :key="item.id" size="small"
                      style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}
              </el-tag>
            </div>
          </el-popover>
        </div>
        <el-col :span="18">
          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <el-row>
              <h4>行动记录</h4>
            </el-row>
            <el-row v-for="item in actionList" :key="item.id" class="action-record-cell" align="top">
              <label class="label-time">{{ item.createTime }}</label>
              <div class="label-data">{{ codeDict[item.code] }}</div>
              <div class="label-data">{{ item.title }}</div>
              <div class="label-data" style="color: red;">{{ item.info.realAmount ? (item.info.realAmount ? item.info.realAmount : 0) + ' ￥' : (item.info.amount ? item.info.amount : 0) + ' ￥' }}</div>
              <div class="label-data">{{ item.creator }}</div>
            </el-row>
            <el-empty v-if="!actionList" description="暂无行动记录"/>
            <div class="page-block">
              <el-pagination
                  v-model:currentPage="search.current"
                  v-model:page-size="search.size"
                  :page-sizes="[10, 20, 30, 40]"
                  :small="true"
                  :disabled="false"
                  :background="false"
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  :hide-on-single-page="true"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="tabs-list">
      <div class="close-btn" @click="close">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>
    <div class="fixed-right">
      <div class="fixed-cell" @click="addMatter">
        <el-icon>
          <ele-Plus/>
        </el-icon>
      </div>
      <!-- <div class="fixed-cell" @click="openEdit">
          <el-icon>
              <ele-Edit/>
          </el-icon>
      </div> -->
      <div v-if="scrollTop > 100" class="fixed-cell" @click="backTop">
        <el-icon>
          <ele-CaretTop/>
        </el-icon>
      </div>
    </div>
    <active-create v-model:dialogDrawer="dialogEdit" :is-edit="true" :edit-form="form" @onSubmit="onSubmitEdit"></active-create>
    <active-base-edit v-model:dialogDrawer="dialogEditBase" :edit-form="form"></active-base-edit>
    <active-service v-model:dialogDrawer="dialogEditService" :edit-form="form"></active-service>
    <active-participate v-model:dialogDrawer="dialogParticipate" :id="form.id" @onSubmit="refreshUsers"></active-participate>
    <thread-list v-if="dialogThread" v-model:dialogDrawer="dialogThread" :id="form.id"></thread-list>
    <!-- 事项组件 "-->
    <launch-matter
        v-model:visible="addMatterModel"
        @closeCallback="refreshMatter"
        module-code="MARKET"
        v-model:detail-form="form"
        v-model:relate-item="relateItem"
    />
    <!-- 文档组件 -->
    <material-dialog :title="materialTitle" v-model:dialogVisible="dialogMaterial" :default-list="materialList"></material-dialog>

  </el-drawer>
</template>

<script>
import {computed, reactive, toRefs, watch, onMounted, nextTick} from 'vue'
import TreeLine from '/@/components/treeLine/index.vue'
import ActiveCreate from '../components/ActiveCreate.vue'
import ActiveBaseEdit from '../components/ActiveBaseEdit.vue'
import ActiveService from '../components/ActiveService.vue'
import ActiveParticipate from '../components/ActiveParticipate.vue'
import ThreadList from '../components/ThreadList.vue'
import {matterIcon} from '/@/utils/matterIcon'
import MaterialDialog from '/@/components/materialDialog/index.vue'
import LaunchMatter from '/@/views/matter/LaunchMatter.vue'
import api from '/@/api/commonApi'
import {getRelatableId} from '/@/api/matter'

export default {
  name: 'ActiveDetail',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    activeId: {
      type: String,
      default: null
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
    TreeLine,
    ActiveCreate,
    ActiveBaseEdit,
    ActiveService,
    ActiveParticipate,
    ThreadList,
    MaterialDialog,
    LaunchMatter
  },
  emits: ['onSubmit', 'update:dialogDrawer'],
  setup(props, context) {
    const {dialogDrawer, activeId, form} = toRefs(props)
    const drawer = computed({
      get: () => dialogDrawer.value,
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const state = reactive({
      pageSize: '85%',
      treeData: {
        // common: [{
        //     label: '新建',
        //     time: '2022-12-06',
        //     value: '1'
        // },{
        //     label: '筹备中',
        //     time: '2022-12-06',
        //     value: '2'
        // },{
        //     label: '进行中',
        //     time: '2022-12-06',
        //     value: '3'
        // },{
        //     label: '已完成',
        //     time: '2022-12-06',
        //     value: '4'
        // },{
        //     label: '中止',
        //     time: null,
        //     value: '5'
        // }]
      },
      active: 4,
      recentList: [],
      allOptions: [],
      scrollTop: 0,
      refLineTop: 0,
      isDescOpen: false,
      isRemarkOpen: false,
      actionList: [],
      search: {
        current: 1,
        size: 10,
        marketId: '',
        code: ''
      },
      total: 0,
      dialogEdit: false,
      detail: {},
      matterLogList: [],
      dialogEditBase: false,
      dialogEditService: false,
      dialogParticipate: false,
      addMatterModel: false,
      dialogThread: false,
      matterList: [],
      matterTypeList: [],
      codeDict: {},
      matterIcon: matterIcon,
      selIndex: null,
      expendMoney: 0,
      threadNum: 0,
      tradingVolume: 0,
      docNumber: {},
      fileMap: {},
      materialList: [],
      materialTitle: '文档',
      dialogMaterial: false,
      relateItem: {   // 发起事项的关联项
        agendaMatterRelatableId: null,
        seRelateDataId: null,
        label: null
      }
    })
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    const getSize = () => {
      if (document.body.clientWidth <= 1400) {
        return '1220px'
      } else {
        return '85%'
      }
    }
    watch(() => dialogDrawer.value,
        val => {
          if (val) {
            state.pageSize = getSize() // modal 尺寸
            matterCodeDict()
            getDetail()
            getMatterLog()
            getMarketExpend()
            marketMatterList()
            matterStatistics()
            getThreadNum()
            getDocNumber()
            getRelevanceFile()
            // 获取可关联项id
            getRelatableId('Market').then(res => state.relateItem.agendaMatterRelatableId = res.data.id).catch(e => console.log(e))
            state.relateItem.seRelateDataId = form.value.id
            state.relateItem.label = '市场/' + form.value.name
            nextTick(() => {
              const doc = document.querySelector('.el-drawer__body')
              if (doc) {
                doc.onscroll = e => {
                  state.scrollTop = e.target.scrollTop
                }
                if (doc.scrollTop !== 0) doc.scrollTop = 0
              }
              if (document.querySelector('.refLine')) {
                state.refLineTop = document.querySelector('.refLine').offsetTop
              }
            })
          }
        }
    )
    // 查看线索清单
    const handleSource = () => {
      state.dialogThread = true
    }
    // 获取阶段状态
    const getDetail = () => {
      api.marketStageInfo({marketId: form.value.id}).then(res => {
        state.treeData = res.data
      })
    }
    // 获取事项
    const marketMatterList = () => {
      state.search.marketId = form.value.id
      api.marketMatterList(state.search).then(res => {
        state.actionList = res.data.records
        state.total = res.data.total
      })
    }
    // 状态点击
    const getStage = (e) => {
      console.log(e)
      if (e.time == null || e.time == '') {
        api.editDetailStage({
          marketId: form.value.id,
          stageId: e.value
        }).then(res => {
          form.value.stageId = e.value
          form.value.stageName = e.label
          getDetail()
          context.emit('onSubmit', true)
        })
      }
    }
    // 行动事项操作
    const openTable = (item, ids) => {
      if (state.selIndex == ids) {
        state.selIndex = null
        state.search.code = ''
      } else {
        state.selIndex = ids
        state.search.code = item.code
      }
      marketMatterList()
    }
    // 展开全部
    const checkAllDesc = () => {
      state.isDescOpen = !state.isDescOpen
    }
    const checkAllRemark = () => {
      state.isRemarkOpen = !state.isRemarkOpen
    }
    // 页码切换
    const handleCurrentChange = e => {
      state.current = e
    }
    // 编辑
    const openEdit = () => {
      state.dialogEdit = true
    }
    // 回到顶部
    const backTop = () => {
      nextTick(() => {
        document.querySelector('.active-detail-content').parentNode.scrollTo(0, 0)
      })
    }
    // 编辑提交
    const onSubmitEdit = () => {
      getDetail()
    }
    // 基础信息编辑
    const handleEditBase = () => {
      state.dialogEditBase = true
    }
    // 服务商信息编辑
    const handleServiceEdit = () => {
      state.dialogEditService = true
    }
    // 选择参与人
    const handleSelectJoin = () => {
      state.dialogParticipate = true
    }
    // 添加事项
    const addMatter = () => {
      state.addMatterModel = true
      // api.matterGroupList({code: 'MARKET'}).then(res => {
      //   state.matterList = res.data
      //   state.addMatterModel = true
      // })
    }
    // 关闭事项model
    const CloseModel = () => {
      showHeaderTime.value = false
      showTime.value = false
    }
    // 加载活动参与人
    const refreshUsers = () => {
      api.marketUserList({marketId: form.value.id}).then(res => {
        form.value.participantList = res.data
      })
    }
    // 加载事项列表、统计、线索数量
    const refreshMatter = () => {
      state.addMatterModel = false
      marketMatterList()
      matterStatistics()
      getMatterLog()
      getThreadNum()
      getDocNumber()
      getRelevanceFile()
    }
    // 获取事项活动记录
    const getMatterLog = () => {
      api.getMatterLog({id: form.value.id}).then(res => {
        state.matterLogList = res.data
      })
    }
    // 获取事项统计
    const matterStatistics = () => {
      api.matterStatistics({marketId: form.value.id}).then(res => {
        state.matterTypeList = res.data
      })
    }
    // 获取事项编码列表
    const matterCodeDict = () => {
      api.matterCodeDict().then(res => {
        state.codeDict = res.data
      })
    }
    // 获取实际支出金额
    const getMarketExpend = () => {
      api.getMarketExpend({marketId: form.value.id}).then(res => {
        state.expendMoney = res.data || 0
      })
    }
    // 获取线索数量
    const getThreadNum = () => {
      api.getThreadNum({marketId: form.value.id}).then(res => {
        state.threadNum = res.data.marketNum
        state.tradingVolume = res.data.tradingVolume
      })
    }
    // 获取文档数量
    const getDocNumber = () => {
      api.docNumber({relevanceId: form.value.id}).then(res => {
        state.docNumber = res.data
      })
    }
    // 获取文档列表
    const getRelevanceFile = () => {
      api.relevanceFile({relevanceId: form.value.id}).then(res => {
        state.fileMap = res.data
      })
    }
    // 打开文档弹框
    const openMaterial = (type) => {
      state.materialList = []
      if (type == 'doc') {
        state.materialTitle = '文档'
        for (let item of Object.keys(state.fileMap.docMap)) {
          state.materialList.push({
            label: item,
            value: state.fileMap.docMap[item]
          })
        }
      } else {
        state.materialTitle = '附件'
        for (let item of Object.keys(state.fileMap.attachMap)) {
          state.materialList.push({
            label: item,
            value: state.fileMap.attachMap[item]
          })
        }
      }
      state.dialogMaterial = true
    }

    onMounted(() => {
      window.onresize = () => {
        state.pageSize = getSize()
      }
    })
    return {
      ...toRefs(state),
      close,
      drawer,
      handleSource,
      getStage,
      openTable,
      checkAllDesc,
      checkAllRemark,
      marketMatterList,
      handleCurrentChange,
      openEdit,
      addMatter,
      CloseModel,
      backTop,
      openMaterial,
      getDocNumber,
      getRelevanceFile,
      getMatterLog,
      refreshUsers,
      refreshMatter,
      onSubmitEdit,
      getThreadNum,
      handleEditBase,
      matterCodeDict,
      getMarketExpend,
      matterStatistics,
      handleServiceEdit,
      handleSelectJoin
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 5px 0;
    border-radius: 5px 0 0 5px;
  }
}

.active-detail-content {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .header-content {
    .active-title {
      text-align: center;
      font-size: 18px;
      color: var(--next-bg-menuBar-light-1);
    }

    .tips-cell {
      margin-right: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 15px;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 3px;
        bottom: 3px;
        border-right: 1px solid var(--next-bg-menuBarColor);
      }

      &:last-child {
        padding-right: 0;
        margin-right: 0;

        &::after {
          display: none;
        }
      }

      .tips {
        color: var(--el-color-info);
        margin-right: 5px;
      }

      .tips-data {
        color: var(--el-color-info);
        font-size: 13px;
      }
    }
  }

  .label-tips {
    font-size: 12px;
    color: var(--el-color-info);
    width: 100px;
    margin-right: 10px;
    display: block;
    text-align: right;
  }

  .row-cell {
    margin-bottom: 18px;

    &:first-child {
      margin-top: 18px;
    }

    .label-data {
      font-size: 12px;
      color: var(--el-text-color-primary);
      margin-right: 5px;
    }
  }

  .action-card {
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-extra-light);
    padding: 8px 10px;

    .title-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid var(--el-color-primary-light-8);
      margin-left: 10px;

      span {
        line-height: 20px;
        display: inline-block;
        margin-left: 8px;
        color: var(--next-bg-menuBar-light-1);
      }

      .tips {
        font-weight: bold;
        color: var(--next-bg-menuBar-light-1);
        margin-left: 2px;
      }

      &:hover {
        background: var(--el-color-primary-light-8);

        .tips {
          color: var(--el-color-primary);
        }
      }
    }

    .action-cell {
      display: flex;
      align-items: center;

      .action-top {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 14px;

        .action-tips {
          margin-left: 5px;
        }
      }

      .action-data {
        font-weight: bold;
      }
    }
  }

  .action-popper {
    background: transparent !important;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--el-color-primary-light-9);
      opacity: .8;
      filter: grayscale(100%);
    }

    .el-popper__arrow::before {
      background: var(--el-color-primary-light-9) !important;
      opacity: .8;
      filter: grayscale(100%);
    }

    .sale-title {
      color: var(--el-text-color-primary);
    }
  }

  .card-item {
    :deep(.el-tag) {
      cursor: pointer;
    }

    .arrow {
      display: flex;
      align-items: center;
      height: 20px;
      transition: .2s;
      cursor: pointer;
      margin-top: 10px;
      color: var(--el-color-primary-light-6);
      font-size: 20px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .action-add-btn {
    margin: 0 1px;
    color: var(--el-color-primary);
    font-size: 30px;
    opacity: .5;
    position: absolute;
    top: 35%;
    left: 23.8%;
    width: 35px;

    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .card-cell {
    .card-tips {
      margin-right: 5px;
    }

    .card-data {
      margin-top: 3px;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .list-cell {
    display: flex;
    align-items: stretch;
    margin-top: 10px;

    .label-content {
      flex: 1;
      overflow: hidden;
      font-size: 13px;

      .label-data {
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 190px;
        margin-top: 1px;
      }

      .label-all-data {
        overflow: unset;
        width: auto;
        text-overflow: unset;
        display: block;
      }
    }
  }

  .action-record-cell {
    padding: 18px 0;
    border-bottom: 1px dotted var(--el-border-color);

    &:last-child {
      border-bottom: none;
    }

    .label-time {
      margin-right: 10%;
      color: var(--el-color-info);
    }

    .label-data {
      flex: 1;
      overflow: hidden;
      margin-top: -2px;
    }
  }
}

.fixed-right {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 999;

  .fixed-cell {
    background: var(--next-bg-topBar);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-top: 10px;
  }
}
</style>
<style lang="scss">
.activeDetail {
  overflow: unset;
  position: fixed;
  background: var(--next-bg-main-color);
}

.activity {
  color: #18A058
}

.showFinger {
  &:hover {
    cursor: pointer;
    opacity: 1;
  }
}
</style>
